<template>
    <div class="ls-add-admin">
        <div class="ls-card">
            <el-page-header @back="$router.go(-1)" content="修改账号" />
        </div>

        <div class="ls-card m-t-16 p-20">
            <el-form :rules="rules" ref="form" :model="form" label-width="120px" size="small">
                <!-- 管理员账号 -->
                <el-form-item label="管理员账号" prop="super_admin">
                    <el-input class="ls-input" v-model="form.super_admin" placeholder="请输入管理员账号">
                    </el-input>
                    <div class="muted xs m-l-16">商城管理后台的超级管理员账号</div>
                </el-form-item>
                <!-- 密码输入框 -->
                <el-form-item label="管理员密码" prop="super_password">
                    <el-input class="ls-input" v-model="form.super_password" show-word-limit placeholder="请输入管理员密码">
                    </el-input>
                </el-form-item>
                <!-- 确认密码输入框 -->
                <el-form-item label="确认密码" prop="super_password_confirm">
                    <el-input class="ls-input" v-model="form.super_password_confirm" show-word-limit
                        placeholder="请输入确认密码">
                    </el-input>
                </el-form-item>
            </el-form>
        </div>

        <!-- 底部保存或取消 -->
        <div class="bg-white ls-fixed-footer">
            <div class="row-center flex" style="height: 100%;">
                <el-button size="small" @click="$router.go(-1)">取消</el-button>
                <el-button size="small" type="primary" @click="onSubmit('form')">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { apiShopDetail, apiShopChangeSuperAdmin } from "@/api/shop";
@Component
export default class UpdateAccount extends Vue {
    /** S Data **/

    identity: number | null = null; // 当前编辑用户的身份ID

    // 添加商城表单数据
    form: any = {
        super_admin: "", // 账号
        super_password: "", // 密码
        super_password_confirm: "", // 确认密码
    };

    // 表单校验
    rules = {
        super_admin: [
            { required: true, message: "请输入商城账号", trigger: "blur" },
        ],
        super_password: [
            { required: true, message: "请输入密码", trigger: "blur" },
        ],
        super_password_confirm: [
            { required: true, message: "请再次输入密码", trigger: "blur" },
            {
                validator: (rule: object, value: string, callback: any) => {
                    if (this.form.password) {
                        if (!value) callback(new Error("请再次输入密码"));
                        if (value !== this.form.password)
                            callback(new Error("两次输入密码不一致!"));
                    }
                    callback();
                },
                trigger: "blur",
            },
        ],
    };

    /** E Data **/

    /** S Methods **/
    // 点击表单提交
    onSubmit(formName: string) {
        // 验证表单格式是否正确
        const refs = this.$refs[formName] as HTMLFormElement;
        refs.validate((valid: boolean): any => {
            if (!valid) return;
            this.handleShopEdit();
        });
    }

    // 编辑超级管理员账号
    async handleShopEdit(): Promise<void> {
        await apiShopChangeSuperAdmin({ ...this.form, id: this.identity });
        setTimeout(() => this.$router.go(-1), 500);
    }

    // 获取详情
    async getShopDetailFunc(): Promise<void> {
        const res: any = await apiShopDetail({
            id: this.identity as number
        })
        this.form.super_admin = res.account // 账号
    }

    /** E Methods **/

    /** S Life Cycle **/
    created() {
        const query: any = this.$route.query;

        // 编辑模式：初始化数据
        this.identity = +query.id;
        if (+query.id) {
            this.getShopDetailFunc();
        }
    }
    /** E Life Cycle **/
}
</script>

<style lang="scss" scoped>
.ls-add-admin {
    padding-bottom: 80px;

    .ls-input {
        width: 380px;
    }
}
</style>